<template>
  <el-card class="head-tool">
    <div class="content">
      <!--  v-if="如果传递了左边的插槽才显示，没传不显示" -->
      <div class="left" v-if="$slots.left">
        <i class="el-icon-info"></i>
        <slot name="left"></slot>
      </div>
      <div class="right">
        <slot name="right"></slot>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
    mounted () {
        // $slots保存了所有传递过来的插槽
        // 怎么判断有没有传递这个插槽？
        // 就看这个属性有没有值，有值就传了，没传就是undefined
        // console.log(this.$slots.left)
        // console.log(this.$slots.xxxx)
    }
}
</script>

<style lang="scss" scoped>
.head-tool {
  min-height: 46px;
  .content {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      background-color: #e6f7ff;
      border: 1px solid #91d5ff;
      border-radius: 2px;
      display: flex;
      align-items: center;
      font-size: 14px;
      padding: 0 10px;
      height: 30px;
      i {
        color: #409eff;
        margin-right: 5px;
      }
    }
    .right {
        flex: 1;
        text-align: right;
    }
  }
}
</style>
